<template>
    <div class="publicpageview">
        <div class="shenqingyaojian">
            <div class="publictitle">申请要件</div>
            <div class="publicformview">
                <el-form :inline="true" :model="repairFundsSupervision" size="mini" ref="searchForm"
                    label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-form-item label="申请单位名称：" prop="applicant">
                                <el-input v-model="repairFundsSupervision.applicant" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="申请日期：" prop="applicantDate">
                                <el-date-picker v-model="repairFundsSupervision.applicantDate" type="date"
                                    placeholder="年/月/日">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="情况说明" prop="explanationSituation">
                                <el-input v-model="repairFundsSupervision.explanationSituation"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-button type="text" size="mini"
                                @click="handleAddFujuan('requirementsList')">新增附件</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table :data="firstlist" border fit highlight-current-row size="mini">
                    <el-table-column align="center" label="要件名称" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="份数" prop="name">
                    </el-table-column>
                    <el-table-column align="center" label="原件/复印件" prop="phone">
                    </el-table-column>

                    <el-table-column align="center" label="备注" prop="name">
                    </el-table-column>
                </el-table>

            </div>

            <div v-if="type == 'shenhe'">
                <div class="publictitle">申请要件审核</div>
                <div style="display: flex;flex-direction: row; margin-top: 8px;">
                    <span style="width: 120px;">审核意见：</span>
                    <el-input type="textarea" :row="3"></el-input>
                </div>



                <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
                    <el-button type="primary" size="mini" @click="handleConfirm('shenqinyaojian')">同意</el-button>
                    <el-button type="primary" size="mini" @click="handleCancel('shenqinyaojian')">退回</el-button>

                </div>
            </div>
        </div>

        <div class="shenqingyaojian">
            <div class="publictitle">修缮资金使用</div>
            <div class="publicformview">
                <el-form :inline="true" :model="repairFundsSupervision" size="mini" ref="searchForm"
                    label-width="120px">
                    <el-row :gutter="20">

                        <el-col :span="5">
                            <el-form-item label="收款账号：" prop="paymentAccount">
                                <el-input v-model="repairFundsSupervision.paymentAccount"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-form-item label="收款单位名称：" prop="namePayee">
                                <el-input v-model="repairFundsSupervision.namePayee"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-form-item label="收款单位代码：" prop="codePayee">
                                <el-input v-model="repairFundsSupervision.codePayee"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-form-item label="收款开户行：" prop="beneficiaryBank">
                                <el-input v-model="repairFundsSupervision.beneficiaryBank"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-form-item label="申请金额合计：" prop="applicationAmount">
                                <el-input v-model="repairFundsSupervision.applicationAmount"></el-input>
                            </el-form-item>
                        </el-col>


                    </el-row>
                </el-form>
                <el-table :data="firstlist" border fit highlight-current-row size="mini">
                    <el-table-column align="center" label="项目金额" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="名称" prop="name">
                    </el-table-column>

                </el-table>
            </div>

            <div v-if="type == 'shenhe'">
                <div class="publictitle">修缮资金审核</div>
                <div style="display: flex;flex-direction: row; margin-top: 8px;">
                    <span style="width: 120px;">审核意见：</span>
                    <el-input type="textarea" :row="3"></el-input>
                </div>



                <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
                    <el-button type="primary" size="mini">同意</el-button>
                    <el-button type="primary" size="mini">退回</el-button>

                </div>
            </div>
        </div>


        <div class="shenqingyaojian">
            <div class="publictitle">流程附件</div>
            <div class="publicformview">

                <el-table :data="firstlist" border fit highlight-current-row size="mini">
                    <el-table-column align="center" label="附件名称" prop="id">
                    </el-table-column>

                    <el-table-column align="center" label="操作" width="80px">
                        <template slot-scope="scope">

                            <el-button type="text" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="type == 'shenhe'">
                <div class="publictitle">流程附件审核</div>
                <div style="display: flex;flex-direction: row; margin-top: 8px;">
                    <span style="width: 120px;">审核意见：</span>
                    <el-input type="textarea" :row="3"></el-input>
                </div>



                <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
                    <el-button type="primary" size="mini">同意</el-button>
                    <el-button type="primary" size="mini">退回</el-button>

                </div>
            </div>

        </div>

        <div class="shenqingyaojian" style="display: flex;justify-content: flex-end;"
            v-if="type == 'add' || type == 'update'">
            <el-button type="primary" size="mini" @click="handleBaocun">保存</el-button>
            <el-button type="primary" size="mini">打印</el-button>
            <el-button type="primary" size="mini">上传</el-button>
        </div>

        <div class="shenqingyaojian" v-if="type == 'shenhe'">

            <div class="publictitle">审核历史</div>

            <div class="publicformview">

                <el-table :data="firstlist" border fit highlight-current-row size="mini">
                    <el-table-column align="center" label="序号" prop="id">
                    </el-table-column>

                    <el-table-column align="center" label="业务节点" prop="id">
                    </el-table-column>

                    <el-table-column align="center" label="处理人员" prop="id">
                    </el-table-column>

                    <el-table-column align="center" label="审核意见" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="审核结果" prop="id">
                    </el-table-column>

                    <el-table-column align="center" label="时间" prop="id">
                    </el-table-column>
                </el-table>
            </div>
            <div style="display: flex;justify-content: flex-end;margin-top: 20px;">

                <el-button type="primary" size="mini" @click="handleBack">返回</el-button>

            </div>

        </div>

        <div class="shenqingyaojian" v-if="type == 'details'">
            <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
                <el-button type="primary" size="mini" @click="handleBack">返回</el-button>
            </div>
        </div>


        <el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="680px" @close="handleUploadDialogClose">
            <div class="upload-container">
                <el-upload class="upload-dragger" drag :action="uploadAction" :file-list="fileList"
                    :on-success="handleUploadSuccess" :on-error="handleUploadError" :limit="1"
                    :on-remove="handleFileRemove" :before-upload="beforeUpload" :auto-upload="true" ref="upload">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        请将文件拖动到此处，或<em style="color: #008C93;">点击上传</em>
                    </div>
                </el-upload>
            </div>

            <div slot="footer" class="dialog-footer">

                <el-button type="primary" size="mini" @click="handleImport">保 存</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

import { createRepairFundsSupervision, detailRepairFundsSupervision, updateRepairFundsSupervision } from '@/api/repair'
export default {
    name: 'AccommodationManagementXiushanjingfeijianguanAdd',

    data() {
        return {
            type: 'add',
            currentId: '',
            repairFundsSupervision: {
                applicant: "天津市津房物业管理有限公司",
                applicantDate: null,
                explanationSituation: "",
                paymentAccount: "",
                namePayee: "",
                codePayee: "",
                beneficiaryBank: "",
                applicationAmount: ""
            },
            firstlist: [],
            uploadDialogVisible: false,

            fileList: [],
            uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',

        };
    },

    mounted() {
        const { type, id } = this.$route.query;
        this.type = type;
        this.currentId = id;
        if (id) {
            this.initData()
        }
    },

    methods: {
        initData() {
            detailRepairFundsSupervision(this.currentId).then(res => {
                this.repairFundsSupervision = res.data.repairFundsSupervision
            })
        },
        handleBaocun() {
            if (this.type == 'add') {
                createRepairFundsSupervision({
                    repairFundsSupervision: this.repairFundsSupervision
                }).then(res => {
                    this.handleBack();
                })
            }

            if (this.type == 'update') {
                updateRepairFundsSupervision({
                    repairFundsSupervision: this.repairFundsSupervision
                }).then(res => {
                    this.handleBack()
                })
            }
        },

        handleAddFujuan(type) {
            this.uploadDialogVisible = true;
            this.currentType = type;
        },
        // 上传失败
        handleUploadError(err, file) {
            this.$message.error('文件上传失败');
        },

        // 导入数据
        handleImport() {
            if (this.fileList.length === 0) {
                this.$message.warning('请先选择要导入的文件');
                return;
            }


            setTimeout(() => {

                this.uploadDialogVisible = false;
                this.$message.success('导入成功！');

            }, 2000);
        },


        // 上传前验证
        beforeUpload(file) {
            const isExcel = file.type === 'application/vnd.ms-excel' ||
                file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isExcel) {
                this.$message.error('只能上传 Excel 文件！');
                return false;
            }

            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 2MB!');
                return false;
            }

            return true;
        },
        // 文件选择变化
        handleFileRemove(file, fileList) {
            this.fileList = fileList;
            let arr = [...this.currentFileSrc];
            let i;
            arr.forEach((item, index) => {
                if (item.fileSize == file.size && item.name == file.name) {
                    i = index
                }
            })
            arr.splice(i, 1);
            this.currentFileSrc = arr;
            console.log(this.currentFileSrc)

        },
        // 上传成功
        handleUploadSuccess(response, file, fileList) {
            this.fileList = fileList
            if (response.code == 200) {
                this.$message.success('文件上传成功');
                this.currentFileSrc.push(response.data)
            } else {
                this.$message.error('文件上传失败');
                let arr = [...fileList.map(i => i)]
                arr.pop();
                this.fileList = arr;

            }
        },
        handleUploadDialogClose() {
            this.fileList = [];
            this.$refs.upload.clearFiles();
            this.uploadDialogVisible = false;
        },

        handleBack() {
            this.$router.back();
        },
        handleConfirm(type) {
            this.$confirm(
                "请确认是否审核通过此条付费申请",
                "提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {

                })
                .catch(() => { });
        },

        handleCancel(type) {
            this.$confirm(
                "请确认是否退回此条付费申请",
                "提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {

                })
                .catch(() => { });
        },
    },
};
</script>

<style scoped>
.publicpageview {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.shenqingyaojian {
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    padding: 24px 26px;
    margin-bottom: 8px;
}

.publictitle {

    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: bold;
    font-size: 16px;
    color: #008C93;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>